<template>
    <view class="box" @touchmove.stop.prevent="stop" :style="{
            transform: `translateY(${transFormHeight})`,
        }">
        <view class="input_area d-flex">
            <view class="inputHeightBox" v-if="props.inputVisible" :style="{height:inputHeight+'px'}">
                <view class="shadow" v-if="!inpFocusStatu" @tap="isFocus=true;"></view>
                <textarea
                        :auto-height="true"
                        ref="inp"
                        class="inp"
                        :adjust-position="false"
                        cursor-spacing="24"
                        v-model="current_inputText"
                        :show-confirm-bar="false"
                        :disable-default-padding="true"
                        confirm-type="done"
                        confirm-hold="true"
                        @input="handleInput"
                        @confirm="handleSendTextMessage"
                        @linechange="linechange"
                        :focus="isFocus"
                        @focus="inputFocus"
                        @blur="handleBlur"
                        maxlength="140"
                        type="text"
                        :placeholder="placeholderText"
                    />
            </view>



            <view class="icon_box d-flex a-center" :class="{active:current_inputText}">
                <image
                        v-if="!showFace"
                        class="icon"
                        @tap="toggleShowFace"
                        src="/static/im/emoji.png"
                ></image>
                <image
                        v-if="showFace"
                        class="icon"
                        @tap="showKeyBoard"
                        src="/static/im/keyboard.png"
                ></image>

                <view v-if="props.inputVisible" v-show="current_inputText" :class="{active:current_inputText}" class="send_btn d-flex a-center j-center" @tap="send">发送</view>

            </view>



        </view>


        <view class="bottom_box" :class="{show:showFace}">
            <scroll-view  :scroll-y="true" :enable-flex="true" class="face_scroll">
                <view class="face_area">
                    <view class="face d-flex a-center j-center" v-for="item,index in emojiArr" @tap="handleEmojiTap(item)">
                        <text class="emoji">{{item}}</text>
                    </view>
                    <view class="heightBox"></view>

                </view>
            </scroll-view>

            <view class="send_box" v-show="showFace">


                        <view class="top_shadow"></view>

                        <view class="box1">
                            <view class="del-btn" :class="{'disabled':!inputText}"   @tap="handleDel">
                                <image v-if="inputText" class="del_icon" src="/static/im/del-active.png"></image>
                                <image v-if="!inputText" class="del_icon" src="/static/im/del-disabled.png"></image>
                            </view>


                            <view class="send-btn" :class="{'disabled':!inputText}"    @tap="close">
                                <text class="text" :class="{'disabled':!inputText}">完成</text>
                            </view>

                        </view>

                        <view class="bottom_shadow"></view>

            </view>

        </view>



        <!-- <textarea
            :auto-height="true"
            class="TUI-message-input-area"
            :adjust-position="false"
            cursor-spacing="24"
            v-model="inputText"
            :show-confirm-bar="false"
            :disable-default-padding="true"
            confirm-type="done"
            confirm-hold="true"
            @confirm="handleSendTextMessage"
            @linechange="linechange"
            maxlength="140"
            type="text"
            :placeholder="placeholderText"
        /> -->
    </view>
</template>

<script setup lang="ts">
import { ref, computed,watchEffect } from "vue";
import { config as configStore } from "@/store/config";
import emojis from '@/utils/emojiCodes.js'
import { systemInfo as systemInfoStore } from "@/store/systemInfo";
import GraphemeSplitter from "grapheme-splitter";

const systemInfo = systemInfoStore();

const props = defineProps({
    keyboardHeight: {
        type: Number,
        required: 0,
    },
    inputText:{
        type: String,
        required: 1,
    },
    inputVisible:{
        type: Boolean,
        default:false,
    },
    placeholder:{
        type: String,
        default:'',
    },
});

const emit = defineEmits(["updateText","inpFocus","send","blur","transHeightChange"])

const inpFocusStatu = ref(false);
const placeholderText = ref('请输入');
const current_inputText = ref('');

const isFocus = ref(false);



const inp = ref(null)


const stop = ()=>{

}


watchEffect(()=>{
      current_inputText.value = props.inputText;
      if(props.placeholder){
        placeholderText.value = props.placeholder;
      }
});

const showFace = ref(false);

const handleInput = ()=>{
    emit("updateText", String(current_inputText.value));
}
const handleBlur = ()=>{
    isFocus.value = false;
    
    emit("blur");
}

const inputFocus = ()=>{
    showFace.value = false;
}

const showKeyBoard=()=>{
    showFace.value = false;

    if(props.inputVisible){
        isFocus.value = true;
    }else{
         emit("inpFocus");
    }
}


const toggleShowFace = ()=>{
    /* #ifndef H5 */
    uni.hideKeyboard();
    /*#endif*/
    showFace.value = true;
    
}

const handleEmojiTap = (item)=>{
    let curStr = current_inputText.value||'';
    const str = curStr+item;
    emit("updateText", str);
}

const handleDel = () => {
            const str = String(current_inputText.value);
            var splitter = new GraphemeSplitter();
            var graphemes = splitter.splitGraphemes(str); //将含有表情的字符串分割成数组
            graphemes.pop(); //删除数组中最后一个元素
            emit("updateText", graphemes.join(""));
        };


const emojiArr = ref(emojis);
const inputHeight = ref(uni.upx2px(80));

const send=()=>{
    emit("send", current_inputText.value);
}

const linechange = (event)=>{
    let minH = uni.upx2px(80);
    let padd = uni.upx2px(40);
    if(event.detail.height+padd<minH){
        inputHeight.value = minH
    }else{
        inputHeight.value = event.detail.height+padd;
    }
}

const close = ()=>{
    /* #ifndef H5 */
    uni.hideKeyboard();
    /*#endif*/
    showFace.value = false;
}
const getFocus = ()=>{
    isFocus.value = true;
    showFace.value = false;
}
 

const transFormHeight = computed(() => {
        
            if(props.keyboardHeight){
                emit('transHeightChange',props.keyboardHeight)
                return (uni.upx2px(500) - props.keyboardHeight)+'px';
            }
            if(showFace.value){
                emit('transHeightChange',uni.upx2px(500))
                return '0px';
            }
            if(!props.keyboardHeight&&!showFace.value){
                emit('transHeightChange',0)


                if(props.inputVisible){
                    return (uni.upx2px(500) - systemInfo?.safeAreaInsets?.bottom)+'px';
                }else{
                    /* #ifndef H5 */
                    return "100%"
                    /*#endif*/
                }


                /* #ifdef H5 */
                return (uni.upx2px(500) - systemInfo?.safeAreaInsets?.bottom)+'px';
                /*#endif*/


            }

        });
defineExpose({
close,
  getFocus,
});
</script>
<style lang="scss" scoped>
.box{
    width:750rpx;
    position:fixed;
    z-index:100;
    bottom:0;
    background:#fff;
    transition: all ease .15s;
    box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.1);
    .input_area{
        width:750rpx;
        padding:12rpx 20rpx;
        align-items: flex-end;
        gap:20rpx;

        .icon_box{
            position:relative;
            width:70rpx;
            height:80rpx;
            transition: all linear .15s;
            overflow:hidden;
            &.active{
                width:200rpx;
            }
            .send_btn{
                position:absolute;
                background-color:#1DC691;
                top:0;
                left:55rpx;
                width:120rpx;
                height:80rpx;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                border-radius: 10rpx;
                color:#fff;
                font-size:32rpx;
                margin-left:20rpx;
                opacity: 0;
                transition: all linear .15s;
                white-space:nowrap;
                transform: translateX(300rpx);
                &.active{
                    opacity: 1;
                    transform: translateX(0rpx);
                }
                //transform: translateX(100rpx);
                &:active{
                    opacity: .7;
                }
            }
        }


        .inputHeightBox{
            position:relative;
            display:flex;
            align-items: center;
            justify-content: center;
            flex:1;
            border-radius: 4px;
            background: #f5f5f5;
            transition: all linear .3s;
            overflow:hidden;
            padding:20rpx;
            .shadow{
                position:absolute;
                top:0;
                left:0;
                right:0;
                bottom:0;
            }
        }

        .inp{
            flex: 1;
            font-size:30rpx;
            color:#333;
        }

        .icon{
            width: 56rpx;
            height: 56rpx;
        }
    }

    .bottom_box{
        width:750rpx;
        height:500rpx;
        opacity: 0;
        transition: all ease .15s;
        &.show{
            opacity:1;
        }
    }

    .face_scroll{
        position: relative;
        width:750rpx;
        height:500rpx;
    }

    .face_area{
        display:flex;
        flex-direction: row;
        flex-wrap: wrap;
        position:relative;
        .heightBox{
            width:750rpx;
            height:calc(constant(safe-area-inset-bottom) + 30rpx);
            height:calc(env(safe-area-inset-bottom) + 30rpx);
        }

        .face{
            width:93.75rpx;
            height:93.75rpx;
            .emoji{
                font-size:30px;
            }
        }

    }

    .send_box{
            position:absolute;
            bottom:-2rpx;
            z-index:10;
            right:0rpx;
            width:270rpx;
            height:170rpx;
            display:flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
                .top_shadow{
                    position: relative;
                    width:270rpx;
                    height:100rpx;
                    top:2rpx;
                    background-image:linear-gradient(0deg,rgba(255,255,255,1),rgba(255,255,255,0));
                }
                .bottom_shadow{
                    width:270rpx;
                    height:70rpx;
                    background:#fff;
                    // background-image:linear-gradient(to bottom,rgba(255,255,255,1),rgba(255,255,255,0));
                }
            .box1{
                width:270rpx;
                padding:10rpx;
                background:#ffffff;
                border-radius: 10rpx;
                padding-right:20rpx;
                display: flex;
                flex-direction:row;
                justify-content:space-between;
                height:90rpx;
                box-shadow:10px 10px 10px #fff;

            }
            .send-btn{
                width:110rpx;
                height:70rpx;
                background-color:#1DC691;
                border-radius:8rpx;
                display:flex;
                align-items:center;
                justify-content:center;
                .text{
                    color:#fff;
                    font-size:15px;
                    &.disabled{
                        color:#999;
                    }
                    
                }

                &.disabled{
                    background:#f5f5f5;
                }
                &:active{
                    opacity: .7;
                }

            }

            .del-btn{
                width:110rpx;
                height:70rpx;
                background:#f5f5f5;
                border-radius:8rpx;
                display:flex;
                flex-direction: row;
                align-items:center;
                justify-content:center;
                .text{
                    color:#333;
                    font-size:13px;
                    &.disabled{
                        color:#999;
                    }
                }

                .del_icon{
                    width:30px;
                    height:30px;
                }

                &:active{
                    opacity: .7;
                }

            }
        }
}

</style>

